/*
 *首页action状态声明
 */
// 引入内容区域
import { createAsyncThunk } from '@reduxjs/toolkit' // 异步action声明使用方法（若是没有异步方法，则不用导入）
import { DefaultState } from './initialState' // 默认状态ts接口

// ts类型定义区域
// ————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
// action同步函数ts类型
type funInterface = (
  state: DefaultState,
  {
    payload,
  }: {
    payload: number
  }
) => void

// action同步声明
// 每个函数都有两个参数，state为目前的所有的数据；第二个参数为一个对象，我们在页面使用该方法传入的所有值都放在其payload参数中
// ————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
const add: funInterface = (state, { payload }) => {
  state.num += payload
} // 相加时
const sub: funInterface = (state, { payload }) => {
  state.num -= payload
} // 相减时

// 同步action集合对象，方便后续直接使用
// ---------------------------------------------------------------------------------------------
const actionObj = { add, sub }

// 以默认的方式导出此集合对象
export default actionObj

// action异步声明
// createAsyncThunk 创建一个异步action
// createAsyncThunk 创建一个异步action，方法触发的时候会有三种状态：
// pending（进行中）、fulfilled（成功）、rejected（失败）
// 支持两个参数：第一个为命名，按个人喜好来，但是别出现重复；第二个为需要处理的异步函数，如果有数据处理需要使用 return 将数据导出
// 每个异步方法要单独导出，不能和同步混合，这样方便在模块中绑定与后续页面逻辑中引入使用
// ————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
export const asynchronous = createAsyncThunk(
  'index/asynchronous',
  // 此第二参数可以是直接是async的写法，也可以是一个函数导出异步方法的写法，但官方目前建议按照async来操作
  async (data: number) => {
    let exampleNum: number = await new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(data)
      })
    })
    console.log(exampleNum)

    return exampleNum
  }
) // 异步相加时
